<template>
    <view>
        <picker mode="multiSelector" @change="doChange" @columnchange="doColumnChange" :value="self_value"
            :range="self_range">
            <input :disabled="true" placeholder-style="color:#bbbbbb" :placeholder="placeholder" :value="value_text" />
        </picker>
    </view>
</template>

<script setup>
    import {
        ref,
        reactive,
        onBeforeMount,
        defineProps,
        defineEmits,
        toRaw,
        watch
    } from 'vue'
    const props = defineProps({
        timestamp: {
            type: Number,
            default: 0
        },
        emptyText: {
            type: String,
            default: ''
        },
        placeholder: {
            type: String,
            default: ''
        }
    })
    const emit = defineEmits(['dtPickerChanged'])
    // 当前时间
    const now = new Date().getTime()
    const self_range = ref([])
    let self_days = null
    let self_days_text = ''
    let self_hours = null
    let self_seconds = null
    const self_value = ref([0, 0, 0])
    const value_text = ref()
    onBeforeMount(() => {
        const days = ['']
        const days_text = [props.emptyText]
        for (let i = 0; i < 20; i++) {
            days.push(TIME_FORMAT(now + 86400000 * i, 'YYYY-MM-dd'));
            let text = TIME_FORMAT(now + 86400000 * i, 'M月d日');
            if (i == 0) {
                text += ' （今天）';
            }
            if (i == 1) {
                text += ' （明天）';
            }
            if (i == 2) {
                text += ' （后天）';
            }
            days_text.push(text);
            const hours = ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13',
                '14',
                '15', '16', '17', '18', '19', '20', '21', '22', '23'
            ];
            const seconds = [
                '00',
                '01',
                '02',
                '03',
                '04',
                '05',
                '06',
                '07',
                '08',
                '09',
                '10',
                '11',
                '12',
                '13',
                '14',
                '15',
                '16',
                '17',
                '18',
                '19',
                '20',
                '21',
                '22',
                '23',
                '24',
                '25',
                '26',
                '27',
                '28',
                '29',
                '30',
                '31',
                '32',
                '33',
                '34',
                '35',
                '36',
                '37',
                '38',
                '39',
                '40',
                '41',
                '42',
                '43',
                '44',
                '45',
                '46',
                '47',
                '48',
                '49',
                '50',
                '51',
                '52',
                '53',
                '54',
                '55',
                '56',
                '57',
                '58',
                '59'
            ];
            const range = [];
            range[0] = days_text;
            range[1] = hours;
            range[2] = seconds;
            self_range.value = range
            self_days = days
            self_days_text = days_text
            self_hours = hours
            self_seconds = seconds
        }
    })
    const doChange = () => {
        value_text.value = getValueText()
        var day = self_days[self_value.value[0]];
        var hour = self_hours[self_value.value[1]];
        var second = self_seconds[self_value.value[2]];
        var datetime = '';
        if (day) {
            datetime = day + ' ' + hour + ':' + second;
        }
        var timestamp = 0;
        if (datetime) {
            timestamp = new Date(datetime.replace(/-/g, '/')).getTime();
        }

        emit('dtPickerChanged', {
            detail: {
                value: timestamp
            }
        })
    }
    const doColumnChange = (e) => {
        var value = self_value.value;
        value[e.detail.column] = e.detail.value;
        self_value.value = value
    }
    const TIME_FORMAT = (t, fmt) => {
        const newDate = new Date();
        newDate.setTime(t);
        return newDate.VP_FORMAT(fmt);
    }
    const timestampChange = (timestamp) => {
        // 未初始化时不执行
        if (!self_days) {
            return;
        }
        if (timestamp > 0) {
            var days = self_days;
            var days_text = self_days_text;
            var hours = self_hours;
            var seconds = self_seconds;
        }
        if (timestamp < now) {
            timestamp = now;
        }
        var date = TIME_FORMAT(timestamp, 'YYYY-MM-dd');
        var hour = TIME_FORMAT(timestamp, 'hh');
        var minutes = TIME_FORMAT(timestamp, 'mm');
        var value = toRaw(self_value.value)
        for (var i = 0; i < days.length; i++) {
            if (date == days[i]) {
                value[0] = i;
                break;
            }
        }
        for (var i = 0; i < hours.length; i++) {
            if (hour == hours[i]) {
                value[1] = i;
                break;
            }
        }
        // console.log('VP---D>'+value[1]);
        for (var i = 0; i < seconds.length; i++) {
            if (minutes == seconds[i]) {
                value[2] = i;
                break;
            }
        }
        self_value.value = value
        value_text.value = getValueText()
    }
    const getValueText = () => {
        var day = self_days_text[self_value.value[0]];
        var hour = self_hours[self_value.value[1]];
        var second = self_seconds[self_value.value[2]];
        if (self_days[self_value.value[0]] == '') {
            return day;
        } else {
            return day + ' ' + hour + ':' + second;
        }
    }
    console.log(props, 'props')
    watch(props.timestamp, (nd) => {
        timestampChange(nd)
    }, {
        immediate: true
    })
</script>

<style>
    @import './dtPicker.css';
</style>